<template>
  <div>
    <div class="fontshow fl" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="doisCollapse()"></div>
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">{{$route.name}}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown>
      <span class="el-dropdown-link">
        {{userinfo.name}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="updatepassword()">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="logout()">退出登陆</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <div class="dialog" v-show="passwordShow">
      <div class="bj"></div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="旧密码">
          <el-input v-model="DoPassWord.oldPassWord" show-password style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="DoPassWord.newPassWord" show-password style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="DoPassWord.qrPassWord" show-password style="width:300px;"></el-input>
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="passwordShow = false">取 消</el-button>
        <el-button type="primary" @click="doupdateUserPassWord">确 定</el-button>
      </div>
    </div>

    <!-- <el-dialog title="修改密码" :visible.sync="passwordShow" width="450px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="旧密码">
          <el-input v-model="DoPassWord.oldPassWord" show-password style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="DoPassWord.newPassWord" show-password style="width:300px;"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordShow = false">取 消</el-button>
        <el-button type="primary" @click="doupdateUserPassWord">确 定</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
import { updateUserPassWord } from "../api/api";

export default {
  name: "HelloWorld",
  props: {
    isCollapse: Boolean,
  },

  data() {
    return {
      form: {},
      userinfo: {},
      passwordShow: false,
      DoPassWord: {},
    };
  },

  mounted() {
    let that = this;
    that.userinfo = JSON.parse(localStorage.getItem("userinfo"));
  },

  methods: {
    updatepassword() {
      let that = this;
      that.passwordShow = true;
      that.DoPassWord.oldPassWord = row.oldPassWord;
      that.DoPassWord.newPassWord = row.newPassWord;
      that.DoPassWord.qrPassWord = row.qrPassWord;
    },

    async doupdateUserPassWord() {
      let that = this;

      if (that.DoPassWord.newPassWord !== that.DoPassWord.qrPassWord) {
        this.$message({
          message: "两次密码输入不一致!",
          type: "warning",
        });
        return;
      }
      let pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[~!@#$%^&*]).{12,20}');
      if(!pwdRegex.test(that.DoPassWord.newPassWord)){
         this.$message({
          message: "密码必须包含字母、数字、特殊字符最少12位,最长20位!",
          type: "warning",
        });
        return;
      }

      let params = that.DoPassWord;
      let res = await updateUserPassWord(params);
      if (res.data.Code == 200) {
        that.$message.success(res.data.Msg);
        that.passwordShow = false;
      }else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    doisCollapse() {
      let that = this;
      that.$emit("update:isCollapse", !that.isCollapse);
    },
    logout() {
      localStorage.removeItem("token");
      this.$router.push({
        path: "/login",
        query: { setid: 123456 },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog {
  width: 400px;
  margin: 0 auto;
  position: relative;
  top: 190px;
  z-index: 88;
  background: #fff;
  padding: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.el-header {
  background-color: #fff;

  line-height: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.sidebarbox {
  width: 100%;
  background: #fff;
  height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.logo {
  line-height: 55px;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.logo a {
  color: #000;
}

.navbox {
}

.breadcrumb a {
  color: #2c3e50 !important;
}

.navbox span a {
  line-height: 60px;
  font-size: 18px;
  text-decoration: none;
  color: #555;
  margin-right: 20px;
}
.userinfo {
  margin-top: 18px;
  cursor: pointer;
}
</style>
